I created a to-do list kind of app that is connected to a db on firestore.
I have a form that adds a new document to the list, both front-end and db and it works,
I have a method that listens to the changes in the db and updates the document in the browser and it works.
So I see that I manage to refer to the collection in the db and save it in variables, but it is only reactive to deleting documents if I do it manually from firebase website.
Here is the method that I am trying to use
removeObject(id){
const db = getFirestore(app);
console.log("test")
deleteDoc(doc(db, "Listify", doc(id));
}
And here is the way I'm calling it in HTML
<v-card flat v-for="project in projects" :key="project.id">
<v-layout row justify-end wrap :class="`pa-3 project ${project.status}`">
...
...
<v-flex xs6 sm4 md2 class="text-center-xs">
<div class="right text-center">
<v-chip small :class="`${project.status} white--text caption my-2`"> {{project.status}}</v-chip>
<v-btn flat fab small dark class="red" @click="removeObject(project.id)">
<v-icon small class="pa-0">delete</v-icon>
</v-btn>
</div>
</v-flex>
</v-layout>
<v-divider></v-divider>
</v-card>
I tried to refer to the doc id in the method in many ways, but it only works when I hard code the id for that document, and even in that case it deletes the last item of the array "projects" that I defined in the data section of the app, and then when I refresh the page, that last item comes back and the one with the id that I hardcoded is actually deleted.
I tried calling "removeObject(id)" as async and use await on "deleteDoc(.....)" but still does not work,
I thought about looping the collection but I would not know the right way to do it,
and finally in firebase official repo in githhub I only found this syntax "await deleteDoc(doc(db, "cities", "DC"));"
Which did not help me as it only works with specific Ids or doc names;
How could I delete, clicking on the button that calls the delete method, remove that specific item I targeted both client and db side?